<template>
  <el-drawer
    title="资源列表"
    :append-to-body="true"
    :before-close="handleDrawerClose"
    :wrapperClosable="false"
    custom-class="demo-drawer"
    :visible.sync="innerDrawer"
  >
    <template>
      <div class="demo-drawer__content">
        <div class="queryform">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="资源名称:" prop="resourceName">
              <el-input
                v-model="form.resourceName"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="资源IP:" prop="resourceIp">
              <el-input
                v-model="form.resourceIp"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="资源端口:" prop="resourcePort">
              <el-input
                v-model="form.resourcePort"
                @keyup.native="getNumber('resourcePort')"
                placeholder="请输入"
              ></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="refresh">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          :data="tableresourceData"
          :border="true"
          @row-click="singleSelect"
          style="width: 100%"
        >
          <el-table-column label="" width="45">
            <template v-slot="scope">
              <el-radio
                class="radio"
                v-model="resourceradio"
                :label="scope.$index"
                >{{ null }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column prop="resourceName" label="资源名称" width="180">
          </el-table-column>
          <el-table-column prop="resourceIp" label="资源IP" width="180">
          </el-table-column>
          <el-table-column prop="resourcePort" label="资源端口">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageOption.currentPage"
          style="text-align: right; margin-top: 10px"
          background
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageOption.total"
        >
        </el-pagination>
        <div class="demo-drawer__footer">
          <el-button @click="handleDrawerClose">取 消</el-button>
          <el-button type="primary" @click="sumbitDrawer">确 定</el-button>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script>
import { getList, addList, editList, delCurRow } from "@/api/yybl/resource.js";
export default {
  components: {},
  props: {
    innerDrawer: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      resourceradio: "",
      singleSelectRow: {},
      tableresourceData: [],
      form: {
        resourceName: "",
        resourceIp: "",
        resourcePort: "",
      },
      pageOption: {
        currentPage: 1,
        size: 10,
        total: 0,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    sumbitDrawer() {
      this.$emit("getrow", this.singleSelectRow);
      this.$emit("update:innerDrawer", false);
      this.singleSelectRow = {};
      this.resourceradio = "";
    },
    singleSelect(row) {
      this.resourceradio = this.tableresourceData.indexOf(row);
      this.singleSelectRow = row;
    },

    handleSizeChange(val) {
      this.pageOption.size = val;
      this.refresh();
    },
    handleCurrentChange(val) {
      this.pageOption.currentPage = val;
      this.refresh();
    },
    getparams() {
      return {};
    },
    getlists(fn, arg) {
      let params = {
        ...arg,
        pageSize: this.pageOption.size,
        pageNum:
          this.pageOption.currentPage > 0 ? this.pageOption.currentPage - 1 : 0,
      };
      fn(params)
        .then((res) => {
          if (res.rescode == 200) {
            const { data } = res;
            this.pageOption.total = data.totalCount;
            this.tableresourceData = data.rows || data.dataList || [];
            console.log(this.pageOption.total,this.pageOption.currentPage);
            if (this.tableresourceData.length == 0 && this.pageOption.currentPage > 1) {
              this.pageOption.currentPage = 1;
              this.getlists(fn, arg);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getparams() {
      const { resourceName, resourceIp, resourcePort } = this.form;
      let params = {
        resourceName: resourceName || null,
        resourceIp: resourceIp || null,
        resourcePort: resourcePort + "" || null,
      };
      return params;
    },
    refresh() {
      let params = this.getparams();
      this.getlists(getList, params);
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.refresh();
    },
    getNumber(key) {
      this.form[key] = this.form[key].replace(/\D/g, "");
    },
    handleDrawerClose() {
      this.$emit("update:innerDrawer", false);
      this.singleSelectRow = {};
      this.resourceradio = "";
    },
  },
  created() {
    this.refresh();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
  min-width: 700px;
  .el-drawer__body {
    padding: 0 15px;
  }
  .demo-drawer__footer {
    margin-top: 16px;
    text-align: end;
  }
}
.queryform {
  ::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      max-width: 50%;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 50%;
    }
  }
}
</style>
